<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
  <head>
    <base href="<%=basePath%>">
    <title>首页</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> 
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link href="<%=basePath%>css/bootstrap.min.css" rel="stylesheet">
	<link href="<%=basePath%>css/home.css" rel="stylesheet">
	<link rel="stylesheet" href="<%=basePath%>js/bootstrap-3.3.5-dist/css/bootstrap.min.css">
	<link href="css/mui.min.css" rel="stylesheet" type="text/css" />
	<link href="css/style.css" rel="stylesheet" type="text/css" />
	<link href="css/icons-extra.css" rel="stylesheet" type="text/css" />
  </head>
  
  <script src="<%=basePath%>js/jquery-2.1.1.js"></script>
  <script src="<%=basePath%>js/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
  <script src="<%=basePath%>js/min/jquery-v1.10.2.min.js" type="text/javascript"></script>
   <script src="<%=basePath%>js/min/modernizr-custom-v2.7.1.min.js" type="text/javascript"></script>
   <script src="<%=basePath%>js/min/hammer-v2.0.3.min.js" type="text/javascript"></script>
   <link href="<%=basePath%>css/flickerplate.css"  type="text/css" rel="stylesheet">
   <script src="<%=basePath%>js/min/flickerplate.min.js" type="text/javascript"></script>
   <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
   <script src="<%=basePath%>lanju/js/home.js"></script>
     <script>
     var path = "<%=path%>";
     var nonce="";//生成签名的随机串
     var signature="";//签名
     var timestamp="";//时间戳
     var title="欢迎使用蓝居";
     var desc="这是蓝居管家首页，欢迎使用";
     var sharLink="http://nvstop.cn/LanJuPublic/lanju/home.jsp";
     var imgUrl="http://nvstop.cn/LanJuPublic/images/lanju.jpg";
     var basePath="<%=basePath%>";
     $(document).ready(function(){  
   	  var url = encodeURI(location.href.split('#')[0]);
   	  $.ajax({
   	         url: basePath+"/weixinImpl/getEncryptJsapiTicket.spring?rn="+(new Date().getTime()),
   	         type: "POST",
   	         data:{"url":url},
   	         dataType: "json",
   	         success: function(data){
   	        	 if(data != null){
   	        		 nonce=data.nonce;
   		             signature=data.signature;
   		             timestamp=data.timestamp;
   		             loadWx();
   	        	 }
   	             
   	          },
   	          error:function(err){
   	            console.log('异常');
   	          }
   	        });
   });
     
     function loadWx(){
   	  wx.config({
   		    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
   		    appId: 'wxb3b7beee9190b2ef', // 必填，公众号的唯一标识wxd894029b9bdb4b67
   		    timestamp: timestamp, // 必填，生成签名的时间戳
   		    nonceStr: nonce, // 必填，生成签名的随机串
   		    signature: signature,// 必填，签名
   		    jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ'] // 必填，需要使用的JS接口列表
   		});
   	  wx.ready(function(){
   		  //新版本，还没支持
//    		  wx.updateAppMessageShareData({ 
//    		        title: title, // 分享标题
//    		        desc: desc, // 分享描述
//    		        link: sharLink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
//    		        imgUrl: imgUrl, // 分享图标
//    		}, function(res) { 
   			
//    		这里是回调函数 
//    		}); 
   		  
//    		  wx.updateTimelineShareData({ 
//    		        title: title, // 分享标题
//    		        link: sharLink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
//    		        imgUrl: imgUrl, // 分享图标
//    		}, function(res) { 
//    			alert(res);
//    		这里是回调函数 
//    		}); 
   		  //分享到朋友圈
   		  wx.onMenuShareTimeline({
   			    title: title, // 分享标题
   			    link: sharLink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
   			    imgUrl: imgUrl, // 分享图标
   			    desc: desc, // 分享描述
   			    success: function () {
   			    // 用户确认分享后执行的回调函数
   				},
   			cancel: function () {
   			    // 用户取消分享后执行的回调函数
   		    }
   		});
   		  //分享到朋友
   		  wx.onMenuShareAppMessage({
   			  title: title, // 分享标题
   			  desc: desc, // 分享描述
   			  link: sharLink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
   			  imgUrl: imgUrl, // 分享图标
   			  type: 'link', // 分享类型,music、video或link，不填默认为link
   			  dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
   			  success: function () {
   			  // 用户确认分享后执行的回调函数
   			  },
   			  cancel: function () {
   			  // 用户取消分享后执行的回调函数
   			  }
   			  });
   		  //分享到QQ
   		  wx.onMenuShareQQ({
   			  title: title, // 分享标题
   			  desc: desc, // 分享描述
   			  link: sharLink, // 分享链接
   			  imgUrl: imgUrl, // 分享图标
   			  success: function () {
   			  // 用户确认分享后执行的回调函数
   			  },
   			  cancel: function () {
   			  // 用户取消分享后执行的回调函数
   			  }
   			  });
   	  });
   	  
   	  wx.error(function(res){
   		
   	  });
   	  
   }
     function tosearch(){
    	 $("#search_content").show();
    	 $("#container").hide();
     }
     function back(){
    	 $("#search_content").hide();
    	 $("#container").show();
     }
 	function  search(){
    	$(".house_ul").html("");
    	Home.queryHouseList();
     }
     </script>
  <body>
  <div style="width: 100%;height: 100%;background: #fff;position: absolute;z-index: 999;display: none" id="search_content">
  	<header id="header" class="mui-bar mainBar pinkBar" style="height: 45px;background: #fff"> 
	<div style="background:#fff;height: 45px;">
	<div class="top_rg" style="width: 92%">
			<input id="search" name="search" class="search tui-number-cell" style="-webkit-user-select:auto" placeholder="请输入小区/地铁/户型等关键词"/>
			<a href="javaScript:search()">
			<img alt="" src="<%=basePath%>images/search.png" style="width: 25px;float: right;    margin-top: -32px; position: relative;margin-right: 10px;" >
			</a>
	</div>
	<a href="javaScript:back()">
	<img alt="" src="<%=basePath%>images/back.png" style=" width: 25px; position: relative; float: left;margin-top: -33px;margin-right: 5px;    margin-right: 43px;">
	</a>
	</div>
  </header>
  <div class="tuijian_house_content" style="margin-top: 60px;">
			<div>
			<ul class="house_ul">
				<%-- <li>
					<img class="tuijian_house_content_img" src="<%=basePath%>images/binner1.jpg">
					<div class="house_title">北京理工大学整租</div>
					<div class="house_title house_price"><span class="house_size">15平方</span><span class="house_type">两房一厅</span><span class="price">1800元/月</span></div>
					<div class="house_title house_address"><span class="jiaotong"><img src="<%=basePath%>images/postion.png" class="position">高铁站</span> </div>
				</li>
				
			 --%>
			</ul>
			</div>
		</div>
  </div>
  <div class="container" id="container"> 
  
    <header id="header" class="mui-bar mainBar pinkBar" style="height: 45px;background: #fff"> 
	<div style="background:#fff;height: 45px;">
	<div class="top_lf">
			<select class="select_css">
				<option>珠海</option>
				<option>广州</option>
				<option>深圳</option>
			</select>
	</div>
	<div class="top_rg" onclick="tosearch()">
			<input id="search" name="search" class="search tui-number-cell" style="-webkit-user-select:auto" placeholder="请输入关键词"/>
			<a >
			<img alt="" src="<%=basePath%>images/search.png" style="width: 25px;float: right;    margin-top: -32px; position: relative;margin-right: 10px;" >
			</a>
	</div>
	
	</div>
  </header>
<nav class="mui-bar mui-bar-tab footer"
	style="overflow-x: hidden;overflow-y: auto; ">
	<a class="mui-tab-item mui-active"  onclick="toLink('home.jsp',this)"> <span
		class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">首页</span>
	</a> <a class="mui-tab-item "  onclick="toLink('gainLanJu.jsp',this)" > <span
		class="mui-icon mui-icon-extra mui-icon-extra-xiaoshuo"></span> <span
		class="mui-tab-label" >了解蓝居</span>
	</a> <a class="mui-tab-item"   onclick="toLink('zukeFuwuList.jsp',this)"  > <span
		class="mui-icon mui-icon-extra  mui-icon-extra-hotel"></span> <span
		class="mui-tab-label">租客服务</span>
	</a> <a class="mui-tab-item" > <span
		class="mui-icon mui-icon-extra mui-icon-extra-rank"></span> <span
		class="mui-tab-label">业主服务</span>
	</a>
</nav>
	 <div class="mui-content pt88 "  style="padding-top :50px;"> 

	
	<div class="flicker-example" style="height: 160px;">
		
		<ul>
			
			<li data-background="images/flicker-1.jpg" style="height: 160px">
				<div class="flick-title">Flickerplate Is Working</div>
				<div class="flick-sub-text">Heaven forbid this package you downloaded is broken. That wouldn't be embarrassing at all.</div>
			</li>
			
			<li data-background="images/flicker-2.jpg" style="height: 160px">
				<div class="flick-title">Editable via Javascript or CSS</div>
				<div class="flick-sub-text">Take a look at the extensive documentation to see how you can change the settings in multiple ways.</div>
			</li>
			
			<li data-background="images/flicker-3.jpg" style="height: 160px">
				<div class="flick-title">Touch Enabled Through the Hammer.js Library</div>
				<div class="flick-sub-text"> Hammer.js is a great touch library that has been included as part of the Flickerplate package.</div>
			</li>
			
		</ul>
	</div> 
	
	<div class="service_tab">
	<ul >
		<li>
			<div clss="wholerent">
				<div class="service">租房</div>
				<div class="service_content" id="rent">
					<ul>
						<li><a><img src="<%=basePath%>images/zufang_icon/home.png" class="service_content_img"> </img>蓝居友家</a></li>
						<li><a><img src="<%=basePath%>images/zufang_icon/zhengzu.png" class="service_content_img"> </img>蓝居整租</a></li>
						<li><a><img src="<%=basePath%>images/zufang_icon/zhizu.png" class="service_content_img"> </img>业主直租</a></li>
						<li><a><img src="<%=basePath%>images/zufang_icon/dingzhi.png" class="service_content_img"> </img>个性定制</a></li>
					</ul>
			
				</div>
				
		   </div> 
		</li>
		
		<li style="margin-top: 100px;">
			<div class="service" style="background: #FF6633">服务</div>
			<div class="service_content" id="service">
				<ul>
					<li><a><img src="<%=basePath%>images/fuwu_icon/baojie.png" class="service_content_img"> </img>保洁服务</a></li>
					<li><a><img src="<%=basePath%>images/fuwu_icon/weixiu_fuwu.png" class="service_content_img"> </img>维修服务</a></li>
					<li><a><img src="<%=basePath%>images/fuwu_icon/banjia.png" class="service_content_img"> </img>搬家服务</a></li>
					<li><a><img src="<%=basePath%>images/fuwu_icon/chaxun.png" class="service_content_img"> </img>服务查询</a></li>
				</ul>
			
			</div>
			
		</li>
	</ul>
	</div>

	
	<div class="tuijian_house">
		<div class="niceHouse">
				<span>推荐好房</span>
				<a>查看更多 >></a>
		</div>
		<div class="tuijian_house_content">
			<div>
			<ul class="ghouse">
				<%-- <li>
					<img class="tuijian_house_content_img" src="<%=basePath%>images/binner1.jpg">
					<div class="house_title">北京理工大学整租</div>
					<div class="house_title house_price"><span class="house_size">15平方</span><span class="house_type">两房一厅</span><span class="price">1800元/月</span></div>
					<div class="house_title house_address"><span class="jiaotong"><img src="<%=basePath%>images/postion.png" class="position">高铁站</span> </div>
				</li>
				
				 --%>
			</ul>
			</div>
		</div>
		
	</div>
	
	 </div>
	  <div id="menu-backdrop" class="menu-backdrop2"></div>
	 </div>
<script src="js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
function toLink(txt,tagrt) {
	document.location.href = basePath + "lanju/" + txt;
}
	mui.init({
		swipeBack : true
	//启用右滑关闭功能
	});
	var slider = mui("#slider");
	slider.slider({
		interval : 5000
	});
 
	var url ={
			"0":"1",
			"1":"2",
			"2":"3"
	}
	
	$(function(){
		
		$('.flicker-example').flickerplate({
            auto_flick 				: true,
            auto_flick_delay 		: 8,
            flick_animation 		: 'transform-slide'
        });
		
		$("#rent ul li").click(function(){
			if($(this).index() == 3){
				mui.alert("抱歉，此功能尚未开放");
			}else{
				location.href = "lanju/lanjuZhengzu.jsp?type="+url[$(this).index()];
			}
		})
		
		$("#service ul li").click(function(){
				mui.alert("抱歉，此功能尚未开放");
		})
		
		$(".niceHouse a").click(function(){
			location.href = "lanju/lanjuZhengzu.jsp?grade=1";
		})
		
		Home.queryGoodHouseList();
		
		$(".ghouse").on("click","li",function(){
			var houseId  = $(this).attr("id");
			mui.openWindow({// 没有的前往关联商户
				url : 'lanju/houseDetails.jsp?houseId='+houseId,
				id : 'info'
			});
		})
		
		$(".house_ul").on("click","li",function(){
			var houseId  = $(this).attr("id");
			mui.openWindow({// 没有的前往关联商户
				url : 'lanju/houseDetails.jsp?houseId='+houseId,
				id : 'info'
			});
		})
	});
	</script>
</body>
</html>
